<template>
  <FrontSideTreeTable
    treeDataUrl="/param/diseaseDesc/getDiseaseDescTypes"
    tableDataUrl="/param/diseaseDesc/getList"
    addUrl="/param/diseaseDesc/add"
    editUrl="/param/diseaseDesc/edit"
    deleteUrl="/param/diseaseDesc/delete"
    treeTitle="病害描述类型"
    :tableTitle="selectedNode.name+'规则'"
    :tableProps="{parentId:'diseaseDescTypeId'}"
    :columns="columns"
    searchHint="根据描述类型或描述规则查找查找"
    :searchProps="searchProps"
    :form="form"
    formDialogSize="small"
    :rules="rules"
    :loadingForm="loadingForm"
    @onNodeClick="handleNodeClick"
    @onTreeCreated="handleTreeCreated"
    @beforeAdd="handleAdd"
    @beforeEdit="handleEdit">

    <!--表单-->
    <template slot="form">
      <el-form-item label="描述类型" prop="diseaseDescTypeId">
        <el-select v-model="form.diseaseDescTypeId" style="width:100%;" placeholder="请选择描述类型" filterable>
          <el-option v-for="item of treeData" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="描述规则" prop="diseaseDesc">
        <el-input type="textarea" name="diseaseDesc" :autosize="{minRows:2,maxRows:4}" v-model="form.diseaseDesc" placeholder="点击下面病害参数按钮，添加病害参数"></el-input>
      </el-form-item>
      <el-form-item label="顺序号" prop="sortNo">
        <el-input type="number" v-model.number="form.sortNo" placeholder="可不输入，默认排在最后"></el-input>
      </el-form-item>
    </template>
    <!--参数按钮-->
    <template slot="formExtra">
      <el-card :body-style="{'text-align':'center'}">
        <div slot="header" class="clearfix">
          <span style="line-height: 36px;font-weight: bold;">病害描述参数</span>
          <el-tooltip effect="dark" content="记录病害时作用域内任意参数未填时，整个作用域的语句会被自动删除" placement="top-start">
            <el-button style="float: right;" type="success" @click="setScope">设置作用域</el-button>
          </el-tooltip>
        </div>
        <el-tooltip v-for="param of diseaseParams" :key="param.id" effect="dark" :content="param.notes" placement="top-start">

          <!---文字描述，不需要单位-->
          <a
            v-if="param.dataTypeName==='文字描述' || param.dataTypeName==='整数'"
            class="btn btn-app"
            style="width:100px"
            @click="insertText('{'+param.field+'}')">
            <i class="fa" :class="{'fa-italic':param.dataTypeName==='整数',
           'fa-hand-spock-o':param.dataTypeName==='小数',
            'fa-quote-left':param.dataTypeName==='文字描述'}"></i>
            {{param.name}}
          </a>

          <!--数字，需要单位-->
          <el-popover
            v-else
            placement="bottom"
            title="选择数据单位"
            trigger="click"
            effect="dark">
            <div style="text-align: right; margin: 0">
              <div class="btn-group">
                <button
                  v-for="unit of paramUnits"
                  :key="unit.id"
                  type="button"
                  class="btn btn-default"
                  @click="insertText('{'+param.field+','+unit.name+'}')">
                  {{unit.name}}
                </button>
              </div>
            </div>
            <a slot="reference" class="btn btn-app" style="width:100px">
              <i class="fa" :class="{'fa-italic':param.dataTypeName==='整数',
           'fa-hand-spock-o':param.dataTypeName==='小数',
            'fa-quote-left':param.dataTypeName==='文字描述'}"></i> {{param.name}}
            </a>
          </el-popover>
        </el-tooltip>
      </el-card>
    </template>
  </FrontSideTreeTable>
</template>

<script>
  import FrontSideTreeTable from "../../template/FrontSideTreeTable.vue"
  import {intValidator} from "../../../assets/js/utils/ValidateUtils"
  import {clearFields} from "../../../assets/js/utils/ObjectUtils"
  import {doGet} from "../../../assets/js/utils/RequestUtils"

  const DISEASE_PARAM_URL = "/param/diseaseDesc/getDiseaseParams",
    PARAM_UNIT_URL = "/param/diseaseDesc/getParamUnits";

  export default {
    name:"DiseaseDescMaintenance",
    data() {
      return {
        columns:[
          {prop:"sortNo", label:"顺序号", width:"100", sortable:"custom"},
          {prop:"diseaseDescTypeName", label:"病害描述类型", minWidth:"30"},
          {prop:"diseaseDesc", label:"病害描述规则"}
        ],
        searchProps:["diseaseDesc"],
        form:{
          diseaseDescTypeId:"",
          diseaseDesc:"",
          sortNo:0
        },
        rules:{
          diseaseDescTypeId:[
            {required:true, message:"请选择病害描述类型", trigger:"blur"}
          ],
          diseaseDesc:[
            {required:true, message:"请输入病害描述规则", trigger:"blur"}
          ],
          sortNo:[
            {validator:intValidator, trigger:"blur"}
          ]
        },
        selectedNode:{id:"", name:""},
        treeData:[],
        loadingForm:false,
        diseaseParams:[],
        paramUnits:[]
      }
    },
    methods:{
      handleNodeClick(data) {
        this.selectedNode = data;
        this.form.diseaseDescTypeId = data.id;
      },
      handleTreeCreated(data) {
        this.treeData = data;
      },
      handleAdd() {
        this.fetchData();
        clearFields(this.form);
        this.form = {diseaseDescTypeId:this.selectedNode.id, diseaseDesc:""};
      },
      handleEdit(data) {
        this.fetchData();
        this.form = {...data};
      },
      //根据光标所在位置插入文字
      insertText(text) {
        let textarea = document.getElementsByName("diseaseDesc")[0];
        if (typeof textarea.selectionStart === 'number' && typeof textarea.selectionEnd === 'number') {
          let startPos = textarea.selectionStart,
            endPos = textarea.selectionEnd,
            cursorPos = startPos,
            tmpStr = this.form.diseaseDesc;
          this.form.diseaseDesc = tmpStr.substring(0, startPos) + text + tmpStr.substring(endPos, tmpStr.length);
          cursorPos += text.length;
          textarea.selectionStart = textarea.selectionEnd = cursorPos;
        } else {
          this.form.diseaseDesc += text;
        }
      },
      //设置作用域
      setScope() {
        let textarea = document.getElementsByName("diseaseDesc")[0];
        if (typeof textarea.selectionStart === 'number' && typeof textarea.selectionEnd === 'number') {
          let startPos = textarea.selectionStart,
            endPos = textarea.selectionEnd,
            cursorPos = startPos,
            tmpStr = this.form.diseaseDesc;
          this.form.diseaseDesc = tmpStr.substring(0, startPos) + "[" + tmpStr.substring(startPos, endPos) + "]" + tmpStr.substring(endPos, tmpStr.length);
        }
      },
      fetchData() {
        this.loadingForm = true;
        doGet(DISEASE_PARAM_URL, {component:this})
          .then(response=>{
            this.diseaseParams = response;
            doGet(PARAM_UNIT_URL, {component:this})
              .then(response=>this.paramUnits = response)
              .finally(()=>this.loadingForm = false);
          })
      }
    },
    components:{FrontSideTreeTable}
  }
</script>



// WEBPACK FOOTER //
// DiseaseDescMaintenance.vue?02c1536a
